import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_plugin/base/widget/base_stateless_widget.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../res/colors.dart';
import '../../../res/style.dart';
import '../../../res/text_style.dart';
import 'login_sms_code_logic.dart';

class LoginSmsCodePage extends BaseStatelessWidget<LoginSmsCodeLogic> {
  LoginSmsCodePage({Key? key}) : super(key: key);

  final logic = Get.find<LoginSmsCodeLogic>();
  final state = Get.find<LoginSmsCodeLogic>().state;

  @override
  String titleString() {
    return "";
  }

  @override
  bool setTopBarStyleOrange() {
    return false;
  }

  @override
  Widget buildContent(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 32.w, top: 10.h, right: 32.w, bottom: 36.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            flex: 1,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "请输入验证码",
                  style: TextStyles.textStyle(const Color(0xFF333333), 24.sp, fontWeight: FontWeight.w600),
                  textAlign: TextAlign.left,
                ),
                Box.hBox6,
                Text(
                  "验证码已通过短信发送至 ${state.phone}",
                  style: TextStyles.textStyle(const Color(0xFF333333), 14.sp, fontWeight: FontWeight.w400),
                  textAlign: TextAlign.left,
                ),
                Box.hBox74,
                TextFormField(
                  //验证码
                  controller: state.unameController,
                  keyboardType: TextInputType.number,
                  textAlign: TextAlign.start,
                  style: TextStyles.textStyle(const Color(0xFF333333), 20.sp, fontWeight: FontWeight.w400),

                  inputFormatters: <TextInputFormatter>[
                    LengthLimitingTextInputFormatter(4) //限制长度
                  ],

                  // autofocus: true,
                  textInputAction: TextInputAction.done,
                  // enabled: false,
                  maxLines: null,
                  decoration: InputDecoration(
                    hintText: "请输入验证码",
                    filled: true,
                    fillColor: ColorStyle.color_FFF3F3F3,
                    contentPadding: EdgeInsets.fromLTRB(20.w, 10.h, 20.w, 10.h),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8.r), //圆角大小
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8.r),
                      borderSide: const BorderSide(width: 1, color: ColorStyle.color_FFF3F3F3),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8.r),
                      borderSide: const BorderSide(width: 1, color: ColorStyle.color_FFF3F3F3),
                    ),
                  ),

                  onChanged: (value) {
                    state.smsCode.value = value;
                    if (value.isNotEmpty) {
                      state.isBtnEnabled.value = true;
                    } else {
                      state.isBtnEnabled.value = false;
                    }
                  },
                ),
                Box.hBox10,
                Obx(
                  () => GestureDetector(
                    onPanDown: state.buttonCanClick.value
                        ? (value) {
                            // 隐藏键盘
                            FocusScope.of(context).requestFocus(FocusNode());
                            logic.sendLoginCode(state.phone);
                          }
                        : null,
                    child: Center(
                      child: Text(
                        state.buttonText.value,
                        textAlign: TextAlign.center,
                        style: TextStyles.textStyle(
                            state.buttonText.value == "重新发送" ? ColorStyle.color_FFF06100 : ColorStyle.color_333333, 16.sp,
                            fontWeight: FontWeight.w400),
                      ),
                    ),
                  ),
                ),
                Box.hBox40,
                Obx(
                  () => SizedBox(
                    height: 52.h,
                    width: 312.w,
                    child: ElevatedButton(
                      onPressed: state.isBtnEnabled.value
                          ? () {
                              FocusScope.of(context).requestFocus(FocusNode());
                              logic.quickLogin(state.unameController.text);
                            }
                          : null,
                      style: Styleutils.buttonStyleOrange(),
                      child: Text(
                        "登录",
                        style: Styles.style_white_16_bold,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
